<template>
	<view>
		<view  v-if="types==0">
			<view class="content contop">
				<view class="types"  @click="showTime()">
					<text>时间</text>
					<image src="../../../static/xialajiantoublack.png" class="xialajiantoublack"></image>
				</view>
				<view class="types">
					<picker mode="selector" :range="type" range-key="name" @change="typeChange">
					<text>类型</text>
					<image src="../../../static/xialajiantoublack.png" class="xialajiantoublack"></image>
					</picker>
				</view>
				<rangeDatePick :show="isShow" :showchange="isShow" :start="startDate" :end="endDate" :value="dateValue" @change="bindChange"
				 @cancel="bindCancel" themeColor="#4C83D6" fields="day"></rangeDatePick>
			</view>
			
			<view class="content">
				<view class="active" v-for="(item, index) in comData" :key="item.id" @click="toApplied(item.id)">
					<view class="actitle">
						<view class="huntitle">{{item.active_name}}</view>
						<image src="../../../static/yellowxing.png" class="yellowxing"></image>
						<view class="actime">
							截止时间：{{item.end_time}}
						</view>
					</view>
					<view class="smalltitle">
						<image src="../../../static/sanren.png" class="sanren"></image>
						<text class="zuzhi">组织机构：{{item.name}}</text>
						<!-- <view class="tissue">{{item.org_name}}</view> -->
						<view class="check">{{item.status}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rangeDatePick from '@/components/range-dtpicker/range-dtpicker.vue';
	export default {
		components: {
			rangeDatePick
		},
		data() {
			return {
				type:[],
				comData:[],
				id:'',
				desc:'',
				asc:'',
				types:'',
				userId:'',
				isShow: false,
				user:"",
				dateValue: [],
				status:"",
				organization_id:""
			}
		},
		onShow() {
			// this.getMonitor()
			this.user = uni.getStorageSync('party_name');
			// this.organization_id = uni.getStorageSync('id');
			console.log(this.organization_id)
		},
		onLoad() {
			// this.getMonitor(),
			this.getList(),
			this.getPerject(),
			this.types=uni.getStorageSync('types')
		},
		methods: {
			//选项方法
			statusChange(e){
				let index = e.detail.value
				this.statusValue = index
				this.getList()
			},
			typeChange(e){
				console.log(e.detail.value+1)
				let status = e.detail.value+1
				console.log(status);
				this.typeValue =status
				// this.getList
				this.getList()
			},
			showTime() {
				this.isShow = true
			},
			bindChange(e) {
				console.log(e);
				this.dateValue = e
				this.isShow = false
				this.getList()
			
			},
			getList(start_time="",finish_time=""){
				let type = this.typeValue
				// let area = this.areaValue
				// let _this=this
				let status = this.status
				let time = this.dateValue
				console.log(time);
				console.log(this.status,1111)
				if(time.length){
					start_time = time[0]
					finish_time = time[1]
				}
				this.$post('v1/user/acty',{start_time:start_time?start_time:'',finish_time:finish_time?finish_time:'',page:1,num:20,status:this.typeValue,organization_id:uni.getStorageSync('id')})
				// console.log(status)
				.then(res=>{
					this.comData=res.data
					console.log(res);
					
				})
			},
			bindCancel(e) {
				console.log(e);
				this.isShow = false
			},
			toArray(data,obj={},arr=[]){
				for(let i in data){
					obj={}
					obj.id=i
					obj.name = data[i]
					arr.push(obj)
				}
				return arr
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					day = 1
					year = year - 10;
				} else if (type === 'end') {
					year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getPerject() {
				this.$get('v1/user/status')
					.then(res => {
						if (res.code == 200) {
							this.type=this.toArray(res.data) 
						}
						console.log(res.data);
					})
					.catch()
			},
			toApplied(id){
					uni.navigateTo({
						url:'../perAppliedXiangQing/perAppliedXiangQing??id='+id
					})
			},
			// getMonitor(){
			// 	// let _this=this
			// 	this.$post('v1/user/acty',{organization_id:uni.getStorageSync('organization_id')})
			// 	.then(res=>{
			// 		this.informData=res.data
			// 	})
			// }
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		}
	}
</script>

<style>
.contop{
	padding: 0;
	width: 690rpx;
	display: flex;
}
.xialajiantou,.xialajiantoublack{
	width: 22rpx;
	height: 20rpx;
	vertical-align: middle;
	margin: 0 20rpx;
	margin-top: -2rpx;
}
.time{
	width: 50%;
	background-color: #C30D24;
	line-height: 80rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: normal;
	text-align: center;
	border-top-left-radius: 20rpx;
	border-bottom-left-radius: 20rpx;
}
.types{
	width: 50%;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
}
.actitle,.smalltitle{
	display: flex;
}
.huntitle{
	width: 250rpx;
	font-size: 28rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.yellowxing{
	width: 30rpx;
	height: 30rpx;
	margin-top: 12rpx;
}
.actime{
	color: #999;
	font-size: 22rpx;
	line-height: 55rpx;
	margin-left: 120rpx;
}
.sanren{
	width: 30rpx;
	height: 20rpx;
	margin: 13rpx 10rpx 0 0;
}
.tissue{
	width: 180rpx;
	font-size: 26rpx;
	color: #666;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.zuzhi{
	color: #666;
	font-size: 26rpx
}
.check{
	color: #FFB72F;
	font-size: 28rpx;
	margin-left: 120rpx;
	width: 6rem;
}
.active{
	padding: 20rpx 0;
	border-bottom: 4rpx solid #EAEAEA;
}.


.reject{
	color: #C30D24;
}
.stay{
	color: #486A00;
}
</style>
